<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>银行卡设置</span>
      </div>
      <!-- 已经添加的银行的盒子 -->
      <!-- 判断如果数据为空的话，就不显示 -->
      <div v-if="bankCardList.length" class="bankCard-list">
        <template>
          <!-- 是否编辑的选择器 -->
          <el-checkbox class="edit-btn" v-model="is_edit">编辑</el-checkbox>
          <!-- 以添加的银行卡容器 -->
          <div class="card-box">
            <div
              v-for="(item, index) in bankCardList"
              :key="index"
              style="position: relative"
            >
              <!-- v-if="is_edit"当点击了编辑之后才出现 -->
              <el-button
                type="danger"
                icon="el-icon-delete"
                class="delete-btn"
                circle
                v-if="is_edit"
                size="mini"
                @click="deleteCard(item.cardNum)"
              ></el-button>
              <div class="card-info">
                <span>{{ item.bankName }}</span>
                <span>{{ item.cardNum }}</span>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </template>
      </div>
      <!-- 添加银行卡的盒子 -->
      <div class="new-car-box">
        <div class="add-card" @click="dialogFormVisible = true">
          <span>
            <i class="el-icon-plus"></i>
          </span>
          <span>添加银行卡</span>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="添加银行卡"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form
        ref="bankCardForm"
        :rules="rules"
        :model="bankCardForm"
        :label-width="formLabelWidth"
      >
        <el-form-item label="持卡人" prop="holder">
          <el-input readonly  v-model="bankCardForm.holder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="银行"
          :label-width="formLabelWidth"
          prop="openingBank"
        >
          <el-select
            v-model="bankCardForm.openingBank"
            placeholder="请选择开户行"
            style="width: 100%"
          >
            <el-option label="中国银行" value="中国银行"></el-option>
            <el-option label="农业银行" value="农业银行"></el-option>
            <el-option label="工商银行" value="工商银行"></el-option>
            <el-option label="建设银行" value="建设银行"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行" prop="bankBranch">
          <el-input
            v-model="bankCardForm.bankBranch"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="cityId">
          <el-cascader
            placeholder="请选择"
            v-model="bankCardForm.cityId"
            :options="options"
            @change="handleChange"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="银行卡号" prop="cardNum">
          <el-input
            v-model="bankCardForm.cardNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('bankCardForm')"
          >添加</el-button
        >
        <el-button @click="onCancel('bankCardForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 中国城市地区
import { regionData } from "element-china-area-data";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "WorkspaceJsonCard",

  data() {
    // 银行卡校验器
    var validateCardNum = (rule, value, callback) => {
      // 判断开头不能为0，\d代表数字，19位，$结束
      const regAmount = /\d{19}$/;
      if (regAmount.test(value)) {
        callback();
      } else {
        callback(new Error("请输入19位数字的银行卡号"));
      }
    };
    return {
      // 城市级联选择器
      options: regionData,
      formLabelWidth: "80px",
      // 添加银行卡的表单数据
      bankCardForm: {
        // 持卡人
        holder: "",
        // 开户行
        openingBank: "",
        // 支行
        bankBranch: "",
        // 城市编号
        cityId: "",
        // 银行卡号码
        cardNum: "",
      },
      // 控制银行卡的对话框的开关
      dialogFormVisible: false,
      // bankCardList: [
      //   { bankName: "中国银行", bankNum: 1234567890123456789 },
      //   { bankName: "建设银行", bankNum: 1234567890123456789 },
      //   { bankName: "中国银行", bankNum: 1234567890123456789 },
      //   { bankName: "建设银行", bankNum: 1234567890123456789 },
      //   { bankName: "中国银行", bankNum: 1234567890123456789 },
      //   { bankName: "建设银行", bankNum: 1234567890123456789 },
      // ],
      // 默认编辑状态
      is_edit: false,
      // 校验规则
      rules: {
        // 持卡人
        holder: [
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { required: true, trigger: "blur", message: "请填写持卡人" },
        ],
        // 开户银行
        openingBank: [
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { required: true, trigger: "change", message: "请选择开户银行" },
        ],
        // 支行
        bankBranch: [
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { required: true, trigger: "blur", message: "请选择开户支行" },
        ],
        // 城市编号
        cityId: [
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { required: true, trigger: "change", message: "请选择开户城市" },
        ],
        // 银行卡号
        cardNum: [
          // 还款月数的校验器,trigger:'change'改变一次选择之后就触发一次
          { required: true, message: "请选择银行卡号", trigger: "change" },
          {
            validator: validateCardNum,
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    ...mapActions({
      // 获取银行卡信息
      getBankCard: "card/getBankCard",
      // 添加银行卡
      addBankCard: "card/addBankCard",
      // 删除银行卡
      delBankCard: "card/delBankCard",
    }),
    // 删除银行卡
    deleteCard(cardNum){
      this.$confirm('确定删除此银行卡?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var del_caed = { cardNum:cardNum }
          this.delBankCard(del_caed).then(res =>{
            this.$message({
              message: "删除银行卡成功",
              type: "success",
            });
            this.getBankCard()
          })
        })
    },
    // 级联选择器的选择回调函数（城市数据）
    handleChange(value) {
      console.log(value);
      this.bankCardForm.cityId = value[2];
    },
    // 提交表单
    submit(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          // 添加银行卡（把bankCardForm数据传进去）
          this.addBankCard(this.bankCardForm).then((res) => {
            this.$message({
              message: "添加银行卡成功",
              type: "success",
            });
            // 添加银行卡成功的话，就调用重置表单
            this.onCancel('bankCardForm')
            this.getBankCard()
          });
        } else {
          console.log("校验失败");
        }
      });
    },
    // 隐藏弹出表单和重置表单
    onCancel(formname){
      this.dialogFormVisible = false // 隐藏表单
      // restFields对整个表单进行进行重置
      this.$refs[formname].resetFields()
    }
  },
  computed: {
    // 银行卡列表
    ...mapGetters(["name","bankCardList"]),
  },
  // 生命周期的钩子函数
  created(){
    this.getBankCard()
    this.bankCardForm.holder = this.name
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .dialog-footer {
    text-align: left;
    margin-left: 90px;
  }
  .box-card {
    .new-car-box {
      .add-card {
        width: 200px;
        height: 120px;
        background-color: #67c23a;
        border-radius: 5%; // 圆角
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px 14px;
      }
    }
    .bankCard-list {
      position: relative;
      .edit-btn {
        position: absolute;
        right: 5px;
        top: -15px;
      }
      .card-box {
        display: flex;
        flex-wrap: wrap;
        .delete-btn {
          position: absolute; // 绝对定位
          right: 24px;
          top: 14px;
        }
        .card-info {
          width: 200px;
          height: 120px;
          background-color: #cedfff;
          border-radius: 5%; // 圆角
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 8px 12px;
        }
      }
    }
  }
}
</style>